<template>
  <div class="boxpa">
    <div class="box-top">
      <h1>页面粒子特效配置</h1>

      <el-button type="primary" @click="shuaxin()">确认</el-button>
      <el-button type="success" @click="reshet('default')">重置默认</el-button>
      <el-button type="success" @click="reshet('dark')">重置夜间</el-button>

      <el-divider></el-divider>

    </div>
    <div class="box-bottom">
      <div class="boxpeiz">
        <p class="liziTitle">粒子颜色</p>
        <div class="lizhibox">
          <el-color-picker v-model="par.color"></el-color-picker>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">粒子透明度</p>
        <div class="lizhibox">
          <el-progress
            :percentage="Math.floor(par.particleOpacity * 100)"
            :color="customColors"
          ></el-progress>
          <div>
            <el-button-group>
              <el-button
                icon="el-icon-minus"
                @click="decrease('particleOpacity')"
              ></el-button>
              <el-button
                icon="el-icon-plus"
                @click="increase('particleOpacity')"
              ></el-button>
            </el-button-group>
          </div>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">粒子数量</p>
        <div class="lizhibox">
          <el-input-number
            v-model="par.particlesNumber"
            :min="1"
            :max="140"
            label="粒子数量"
          ></el-input-number>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">粒子外观类型</p>
        <div class="lizhibox">
          <el-radio v-model="par.shapeType" label="circle">circle</el-radio>
          <el-radio v-model="par.shapeType" label="edge">edge</el-radio>
          <el-radio v-model="par.shapeType" label="triangle">triangle</el-radio>
          <el-radio v-model="par.shapeType" label="polygon">polygon</el-radio>
          <el-radio v-model="par.shapeType" label="star">star</el-radio>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">单个粒子大小</p>
        <div class="lizhibox">
          <el-input-number
            v-model="par.particleSize"
            :min="1"
            :max="200"
            label="单个粒子大小"
          ></el-input-number>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">线条颜色</p>
        <div class="lizhibox">
          <el-color-picker v-model="par.linesColor"></el-color-picker>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">线条宽度</p>
        <div class="lizhibox">
          <el-input-number
            v-model="par.linesWidth"
            :min="1"
            :max="100"
            label="线条宽度"
          ></el-input-number>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">连接线是否可用</p>
        <div class="lizhibox">
          <el-switch
            v-model="par.lineLinked"
            active-text="开"
            inactive-text="关"
          >
          </el-switch>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">线条透明度</p>
        <div class="lizhibox">
          <el-progress
            :percentage="Math.floor(par.lineOpacity * 100)"
            :color="customColors"
          ></el-progress>
          <div>
            <el-button-group>
              <el-button
                icon="el-icon-minus"
                @click="decrease('lineOpacity')"
              ></el-button>
              <el-button
                icon="el-icon-plus"
                @click="increase('lineOpacity')"
              ></el-button>
            </el-button-group>
          </div>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">线条距离</p>
        <div class="lizhibox">
          <el-input-number
            v-model="par.linesDistance"
            :min="1"
            :max="200"
            label="线条距离"
          ></el-input-number>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">粒子运动速度</p>
        <div class="lizhibox">
          <el-input-number
            v-model="par.moveSpeed"
            :min="1"
            :max="200"
            label="粒子运输速度"
          ></el-input-number>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">hover特效开关</p>
        <div class="lizhibox">
          <el-switch
            v-model="par.hoverEffect"
            active-text="开"
            inactive-text="关"
          >
          </el-switch>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">hover模式</p>
        <div class="lizhibox">
          <el-radio v-model="par.hoverMode" label="grab">grab</el-radio>
          <el-radio v-model="par.hoverMode" label="repulse">repulse</el-radio>
          <el-radio v-model="par.hoverMode" label="bubble">bubble</el-radio>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">click特效开关</p>
        <div class="lizhibox">
          <el-switch
            v-model="par.clickEffect"
            active-text="开"
            inactive-text="关"
          >
          </el-switch>
        </div>
      </div>
      <div class="boxpeiz">
        <p class="liziTitle">click模式</p>
        <div class="lizhibox">
          <el-radio v-model="par.clickMode" label="push">push</el-radio>
          <el-radio v-model="par.clickMode" label="remove">remove</el-radio>
          <el-radio v-model="par.clickMode" label="repulse">repulse</el-radio>
          <el-radio v-model="par.clickMode" label="bubble">bubble</el-radio>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "particle",
  computed: {
    ...mapState("particle", ["parameter"]),
  },
  data() {
    return {
      par: {
        color: "#81D0CE",
        particleOpacity: .8,
        particlesNumber: 80,
        shapeType: "star",
        particleSize: 2,
        linesColor: "#748082",
        linesWidth: 1,
        lineLinked: true,
        lineOpacity: .8,
        linesDistance: 140,
        moveSpeed: 3,
        hoverEffect: true,
        hoverMode: "grab",
        clickEffect: true,
        clickMode: "push",
      },
      default: {
        color: "#fff",
        particleOpacity: 0.1,
        particlesNumber: 60,
        shapeType: "star",
        particleSize: 3,
        linesColor: "#000",
        linesWidth: 1,
        lineLinked: true,
        lineOpacity: 1,
        linesDistance: 140,
        moveSpeed: 2,
        hoverEffect: true,
        hoverMode: "grab",
        clickEffect: true,
        clickMode: "push",
      },
      dark:{
    color: "#17C69D",
     particleOpacity: 0.95,
        particlesNumber: 60,
        shapeType: "triangle",
        particleSize: 3,
        linesColor: "#28C48B",
        linesWidth: 1,
        lineLinked: true,
        lineOpacity: 0.95,
        linesDistance: 80,
        moveSpeed: 8,
        hoverEffect: true,
        hoverMode: "bubble",
        clickEffect: true,
        clickMode: "repulse",
    
},
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
    };
  },
  mounted() {
    this.par = this.parameter;
  },
  methods: {
    ...mapMutations("particle", ["setparameter"]),
    increase(e) {
      this.par[e] += 0.05;
      if (this.par[e] > 1) {
        this.par[e] = 1;
      }
    },
    decrease(e) {
      this.par[e] -= 0.05;
      if (this.par[e] < 0) {
        this.par[e] = 0;
      }
    },
    shuaxin() {
      this.setparameter(this.par);
      this.$router.go(0);
    },
    reshet(e) {
      this.setparameter(this[e]);
      this.$router.go(0);
    },
  },
  watch: {
    // par(newd, old){
    //     console.log(newd);
    //     this.setparameter(newd)
    // },
    // par: {
    //   handler(newValue, oldValue) {
    //     console.log(newValue);
    //     this.setparameter(newValue);
    //   },
    //   immediate:true,
    //   deep: true,
    // },
    // color(newd, old){
    //     console.log(newd);
    // },
  },
};
</script>

<style lang="less" scoped>
.boxpa {
  
  z-index: 300;
  height: 100%;
  opacity: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  left:auto;
  right: 0;
  .box-top {
    z-index: 500;
    position: sticky;
    top: 0;
    height: 100px;
    h1{
        margin: 10px;
    }

  }
  .box-bottom{
    padding: 10px 20px 40px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
        .boxpeiz{
        margin: 10px 5px;
        display: flex;
        flex-direction: column;
        .liziTitle{
            font-weight: 400px;
            font-size: 18px;
            text-align: left;
            margin: 5px;
        }
        .lizhibox{
            .el-button-group{
               margin-top: 20px;
            }
            margin: 10px 0;
        }
    }
  }
}
</style>